<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IT行业招聘数据分析大屏</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/style.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>IT行业招聘数据分析大屏</h1>
        <p>基于PySpark分析的招聘大数据可视化</p>
        <a href="/" class="back-btn">返回首页</a>
    </div>

    <div class="charts-container">
        <!-- 第一行 -->
        <div class="chart-card">
            <h3 class="chart-title">岗位类别需求分布</h3>
            <div id="chart-job-category" class="chart-content"></div>
        </div>

        <div class="chart-card">
            <h3 class="chart-title">地区招聘情况分布</h3>
            <div id="chart-region" class="chart-content"></div>
        </div>

        <!-- 第二行 -->
        <div class="chart-card">
            <h3 class="chart-title">薪资水平分析</h3>
            <div id="chart-salary" class="chart-content"></div>
        </div>

        <div class="chart-card">
            <h3 class="chart-title">经验要求分布</h3>
            <div id="chart-experience" class="chart-content"></div>
        </div>

        <!-- 第三行 -->
        <div class="chart-card">
            <h3 class="chart-title">学历要求分布</h3>
            <div id="chart-education" class="chart-content"></div>
        </div>

        <div class="chart-card">
            <h3 class="chart-title">热门技能需求TOP30</h3>
            <div id="chart-skills" class="chart-content"></div>
        </div>
    </div>

    <div class="footer">
        <p>数据来源：IT行业招聘数据 | 技术支持：PySpark + ECharts</p>
    </div>
</div>

<script>
    // 自动调整图表大小的函数
    function resizeAllCharts() {
        const charts = [
            'chart-job-category',
            'chart-region',
            'chart-salary',
            'chart-experience',
            'chart-education',
            'chart-skills'
        ];

        charts.forEach(id => {
            const chart = echarts.getInstanceByDom(document.getElementById(id));
            if (chart) {
                chart.resize();
            }
        });
    }

    // 初始化所有图表
    document.addEventListener('DOMContentLoaded', function() {
        // 加载各个图表
        loadJobCategoryChart();
        loadRegionChart();
        loadSalaryChart();
        loadExperienceChart();
        loadEducationChart();
        loadSkillsChart();

        // 窗口大小变化时重绘图表
        window.addEventListener('resize', resizeAllCharts);
    });

    // 加载岗位类别需求图表
    function loadJobCategoryChart() {
        const chartDom = document.getElementById('chart-job-category');
        const myChart = echarts.init(chartDom);

        // 显示加载中状态
        myChart.showLoading();

        // 获取数据
        fetch('/api/job_category')
            .then(response => response.json())
            .then(data => {
                myChart.hideLoading();

                // 提取数据
                const categories = data.map(item => item.category);
                const values = data.map(item => item.demand);

                // 设置选项
                const option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c} ({d}%)'
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'horizontal',
                        bottom: 0,
                        textStyle: {
                            color: '#ccc'
                        }
                    },
                    series: [
                        {
                            name: '岗位需求',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '45%'],
                            data: categories.map((category, index) => {
                                return {
                                    name: category,
                                    value: values[index]
                                };
                            }),
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            label: {
                                show: true,
                                color: '#fff',
                                formatter: '{b}',
                                fontSize: 12
                            },
                            labelLine: {
                                show: true,
                                length: 10,
                                length2: 15
                            }
                        }
                    ]
                };

                myChart.setOption(option);
                // 确保图表正确渲染
                setTimeout(() => {
                    myChart.resize();
                }, 200);
            })
            .catch(error => {
                console.error('获取岗位类别数据失败:', error);
                myChart.hideLoading();
            });
    }

    // 加载地区招聘图表
    function loadRegionChart() {
        const chartDom = document.getElementById('chart-region');
        const myChart = echarts.init(chartDom);

        myChart.showLoading();

        fetch('/api/region_demand')
            .then(response => response.json())
            .then(data => {
                myChart.hideLoading();

                // 只取前10名地区
                const topData = data.slice(0, 10);
                const regions = topData.map(item => item.region);
                const values = topData.map(item => item.demand);

                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['招聘需求'],
                        bottom: 0,
                        textStyle: {
                            color: '#ccc'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '15%',
                        top: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        axisLabel: {
                            color: '#ccc'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#3a3a6e'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#252547'
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: regions,
                        axisLabel: {
                            color: '#ccc'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#3a3a6e'
                            }
                        }
                    },
                    series: [
                        {
                            name: '招聘需求',
                            type: 'bar',
                            data: values,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#16c79a' },
                                    { offset: 1, color: '#3a86ff' }
                                ])
                            },
                            label: {
                                show: true,
                                position: 'right',
                                color: '#fff'
                            }
                        }
                    ]
                };

                myChart.setOption(option);
                setTimeout(() => {
                    myChart.resize();
                }, 200);
            })
            .catch(error => {
                console.error('获取地区招聘数据失败:', error);
                myChart.hideLoading();
            });
    }

    // 加载薪资水平图表
    function loadSalaryChart() {
        const chartDom = document.getElementById('chart-salary');
        const myChart = echarts.init(chartDom);

        myChart.showLoading();

        fetch('/api/salary_analysis')
            .then(response => response.json())
            .then(data => {
                myChart.hideLoading();

                const categories = data.map(item => item.category);
                const salaries = data.map(item => item.avg_salary);

                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['平均薪资'],
                        bottom: 0,
                        textStyle: {
                            color: '#ccc'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '15%',
                        top: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: categories,
                        axisLabel: {
                            color: '#ccc',
                            rotate: 45,
                            interval: 0
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#3a3a6e'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '平均薪资(元)',
                        nameTextStyle: {
                            color: '#ccc'
                        },
                        axisLabel: {
                            color: '#ccc',
                            formatter: '{value} 元'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#3a3a6e'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#252547'
                            }
                        }
                    },
                    series: [
                        {
                            name: '平均薪资',
                            type: 'bar',
                            data: salaries,
                            itemStyle: {
                                color: function(params) {
                                    const colorList = ['#16c79a', '#3a86ff', '#f72585', '#7209b7', '#4cc9f0'];
                                    return colorList[params.dataIndex % colorList.length];
                                }
                            },
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{c} 元',
                                color: '#fff'
                            }
                        }
                    ]
                };

                myChart.setOption(option);
                setTimeout(() => {
                    myChart.resize();
                }, 200);
            })
            .catch(error => {
                console.error('获取薪资水平数据失败:', error);
                myChart.hideLoading();
            });
    }

    // 加载经验要求图表
    function loadExperienceChart() {
        const chartDom = document.getElementById('chart-experience');
        const myChart = echarts.init(chartDom);

        myChart.showLoading();

        fetch('/api/experience_analysis')
            .then(response => response.json())
            .then(data => {
                myChart.hideLoading();

                const experiences = data.map(item => item.experience);
                const values = data.map(item => item.demand);

                const option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'horizontal',
                        bottom: 0,
                        textStyle: {
                            color: '#ccc'
                        }
                    },
                    series: [
                        {
                            name: '经验要求',
                            type: 'pie',
                            radius: ['30%', '70%'],
                            center: ['50%', '45%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: true,
                                color: '#fff',
                                formatter: '{b}'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 16,
                                    fontWeight: 'bold',
                                    color: '#fff'
                                }
                            },
                            labelLine: {
                                show: true
                            },
                            data: experiences.map((exp, index) => {
                                return {
                                    name: exp,
                                    value: values[index]
                                };
                            })
                        }
                    ]
                };

                myChart.setOption(option);
                setTimeout(() => {
                    myChart.resize();
                }, 200);
            })
            .catch(error => {
                console.error('获取经验要求数据失败:', error);
                myChart.hideLoading();
            });
    }

    // 加载学历要求图表
    function loadEducationChart() {
        const chartDom = document.getElementById('chart-education');
        const myChart = echarts.init(chartDom);

        myChart.showLoading();

        fetch('/api/education_analysis')
            .then(response => response.json())
            .then(data => {
                myChart.hideLoading();

                const educations = data.map(item => item.education);
                const values = data.map(item => item.demand);

                const option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'horizontal',
                        bottom: 0,
                        textStyle: {
                            color: '#ccc'
                        }
                    },
                    series: [
                        {
                            name: '学历要求',
                            type: 'pie',
                            radius: '50%',
                            center: ['50%', '45%'],
                            data: educations.map((edu, index) => {
                                return {
                                    name: edu,
                                    value: values[index]
                                };
                            }),
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            label: {
                                show: true,
                                color: '#fff'
                            },
                            labelLine: {
                                show: true
                            }
                        }
                    ]
                };

                myChart.setOption(option);
                setTimeout(() => {
                    myChart.resize();
                }, 200);
            })
            .catch(error => {
                console.error('获取学历要求数据失败:', error);
                myChart.hideLoading();
            });
    }

    // 加载技能需求图表
    function loadSkillsChart() {
        const chartDom = document.getElementById('chart-skills');
        const myChart = echarts.init(chartDom);

        myChart.showLoading();

        fetch('/api/skills_analysis')
            .then(response => response.json())
            .then(data => {
                myChart.hideLoading();

                // 只取前20个技能
                const topSkills = data.slice(0, 20);
                const skills = topSkills.map(item => item.skill);
                const demands = topSkills.map(item => item.demand);

                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['需求量'],
                        bottom: 0,
                        textStyle: {
                            color: '#ccc'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '15%',
                        top: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        axisLabel: {
                            color: '#ccc'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#3a3a6e'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#252547'
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: skills.reverse(),
                        axisLabel: {
                            color: '#ccc',
                            interval: 0,
                            formatter: function(value) {
                                // 长度过长时截断
                                if (value.length > 15) {
                                    return value.substring(0, 15) + '...';
                                }
                                return value;
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#3a3a6e'
                            }
                        }
                    },
                    series: [
                        {
                            name: '需求量',
                            type: 'bar',
                            data: demands.reverse(),
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#f72585' },
                                    { offset: 1, color: '#7209b7' }
                                ])
                            },
                            label: {
                                show: true,
                                position: 'right',
                                color: '#fff'
                            }
                        }
                    ]
                };

                myChart.setOption(option);
                setTimeout(() => {
                    myChart.resize();
                }, 200);
            })
            .catch(error => {
                console.error('获取技能需求数据失败:', error);
                myChart.hideLoading();
            });
    }
</script>
</body>
</html>